<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- layui中的核心css文件 -->
    <link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">
    <!-- swiper的核心css文件 -->
    <link rel="stylesheet" href="swiper/css/swiper.css">
    <!-- 自己的css文件 -->
    <link rel="stylesheet" href="./css/register.css">
    <!-- 数据文件 -->
    <script src="dataJs/data.js"></script>
    <!-- layui中的核心js文件 -->
    <script src="layui-v2.5.7/layui/layui.js"></script>
    <!-- swiper的核心js文件 -->
    <script src="swiper/js/swiper.js"></script>
    <!-- jquery库文件 -->
    <script src="jquery/jquery 1.11.0/jquery-1.11.0.js"></script>
    <!-- 自己的js文件 -->
    <script>
        var arrs = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "U", "W", "X", "Y", "Z"]
        function getMa() {
            var p = '' + arrs[parseInt(Math.random() * 52)] + arrs[parseInt(Math.random() * 52)] + arrs[parseInt(Math.random() * 52)] + arrs[parseInt(Math.random() * 52)];
            $("#getma").html(p);
        }
    </script>
</head>

<body>
    <div class="bg">
        <div class="container" id="main">
            <div class="layui-container" id="registerFrom">
                <h2>注册用户</h2>
                <form id="formDemo" class="layui-form" action="login.html">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline inputLength">
                            <input id="username" type="text" name="username" required lay-verify="username"
                                placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline inputLength">
                            <input id="password" type="password" name="password" required lay-verify="password"
                                placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">确认密码</label>
                        <div  class="layui-input-inline inputLength">
                            <input id="repassword" type="password" name="repassword" required lay-verify="repassword"
                                placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div  class="layui-input-inline inputLength">
                            <input id="phonenum" type="text" name="phonenumber" required lay-verify="phonenumber" placeholder="请输入手机号"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <input id="ma" type="text" name="yanzhengma" required lay-verify="yanzhengma"
                                placeholder="请输入验证码" autocomplete="off" class="layui-input">
                        </div>
                        <div id="getma" class="layui-form-mid layui-word-aux yanzheng" onclick='getMa()'>获取验证码</div>
                    </div>



                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button id="registerButton" class="layui-btn btnLength" lay-submit
                                lay-filter="formDemo" >注册</button>
                        </div>
                    </div>
                </form>
                <div class="lianjie"><a href="./login.html">已有账户，请登录</a></div>
            </div>
        </div>
        <script>
            //Demo
            layui.use('form', function () {
                var form = layui.form;
                var users = JSON.parse(localStorage.getItem("users"));

                form.verify({
                    username: function (value) {//表示当前文本框的值
                        var reg = /^[0-9a-z][\u4E00-\u9FA5\w.-]{4,12}[0-9a-z]$/;
                        if (!reg.test(value)) {//字符串不符合正则校验的规则
                            return "用户名需要是6-12位";
                        }
                        for(var index in users){
                            if(users[index].username==value){
                                return "已存在该用户";
                            }
                        }
                    }
                    , password: [
                        /^[a-zA-Z0-9]{6,12}$/,
                        '密码由数字、字母组成，必须6到12位'
                    ]
                    , repassword: function (value) {
                        if ($("input[name=password]").val() != value) {
                            return "两次密码输入不一致";
                        }
                    }
                    , phonenumber: function (value) {
                        var reg = /^1\d{10}$/;
                        if (!(reg.test(value))) {
                            return "手机号为11位数字"
                        }
                    }
                    , yanzhengma: function (value) {
                        console.log($("div[id=getma]").html())
                        if ($("div[id=getma]").html() != value) {
                            return "验证码错误";
                        }
                    }
                });
                //监听提交
                form.on('submit(formDemo)', function (data) {
                    var strs = localStorage.getItem("users");//获取的是string
                    var users = JSON.parse(strs);//将获取到字符串转换数组
                    var username = $("#username").val();
                    var password = $("#password").val();
                    var phone = $("#phonenum").val();

                    //创建一个注册的用户
                    var u = {
                        id: users.length+1,
                        username: username,
                        password: password,
                        phone: phone,
                    };
                    //将注册的用户添加到数组中去
                    users.push(u);
                    //将数组转换为字符串重新存到localStorage中去
                    localStorage.setItem("users", JSON.stringify(users));

                    // layer.msg(JSON.stringify(data.field));
                    return true;
                });
            });
        </script>
    </div>
</body>

</html>